<div *nzModalTitle> {{ isEdit ? ('mxk.text.edit' | i18n) : ('mxk.text.add' | i18n) }} </div>
<div>
  <form nz-form [formGroup]="formGroup" (ngSubmit)="onSubmit($event)" se-container="1">
    <nz-form-item style="display: none">
      <nz-form-label [nzMd]="6" nzFor="id">{{ 'mxk.text.id' | i18n }}</nz-form-label>
      <nz-form-control [nzMd]="18" nzErrorTip="The input is not valid id!">
        <input [(ngModel)]="form.model.id" disabled="{{ isEdit }}" [ngModelOptions]="{ standalone: true }" nz-input
          name="id" id="id" />
      </nz-form-control>
    </nz-form-item>
    <nz-form-item style="display: none">
      <nz-form-label [nzSm]="6" [nzXs]="24" readonly nzRequired nzFor="userId">{{ 'mxk.users.id' | i18n }}
      </nz-form-label>
      <nz-form-control [nzSm]="18" [nzMd]="18" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid minLength!">
        <input [(ngModel)]="form.model.userId" [ngModelOptions]="{ standalone: true }" nz-input name="userId"
          id="userId" />
      </nz-form-control>
    </nz-form-item>

    <nz-form-item *ngIf="!isEdit && username == ''">
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="displayName">{{ 'mxk.users.displayName' | i18n }}
      </nz-form-label>
      <nz-form-control [nzSm]="18" [nzMd]="18" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid displayName!">
        <nz-input-group nzSearch [nzAddOnAfter]="suffixButton">
          <input [(ngModel)]="form.model.displayName" readonly [ngModelOptions]="{ standalone: true }" nz-input
            name="displayName" id="displayName" />
        </nz-input-group>
        <ng-template #suffixButton>
          <button nz-button nzType="primary" nzSearch (click)="onSelectUser($event)">{{ 'mxk.text.select' | i18n
            }}</button>
        </ng-template>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item *ngIf="isEdit || username !== ''">
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="displayName">{{ 'mxk.users.displayName' | i18n }}
      </nz-form-label>
      <nz-form-control [nzSm]="18" [nzMd]="18" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid displayName!">
        <nz-input-group>
          <input [(ngModel)]="form.model.displayName" disabled [ngModelOptions]="{ standalone: true }" nz-input
            name="displayName" id="displayName" />
        </nz-input-group>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="username">{{ 'mxk.users.username' | i18n }}
      </nz-form-label>
      <nz-form-control [nzSm]="18" [nzMd]="18" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid username!">
        <input [(ngModel)]="form.model.username" disabled="true" [ngModelOptions]="{ standalone: true }" nz-input
          name="username" id="username" />
      </nz-form-control>
    </nz-form-item>
    <nz-form-item style="display: none">
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="appId">{{ 'mxk.apps.id' | i18n }}</nz-form-label>
      <nz-form-control [nzSm]="18" [nzMd]="18" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid appId!">
        <input [(ngModel)]="form.model.appId" readonly [ngModelOptions]="{ standalone: true }" nz-input name="appId"
          id="appId" />
      </nz-form-control>
    </nz-form-item>
    <nz-form-item *ngIf="isEdit">
      <nz-form-label nzRequired [nzSm]="6" [nzXs]="24" nzFor="appName">{{ 'mxk.apps.name' | i18n }}</nz-form-label>
      <nz-form-control [nzSm]="18" [nzMd]="18" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid appName!">
        <input [(ngModel)]="form.model.appName" disabled="true" [ngModelOptions]="{ standalone: true }" nz-input
          name="appName" id="appName" />
      </nz-form-control>
    </nz-form-item>
    <nz-form-item *ngIf="!isEdit && username == ''">
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="appName">{{ 'mxk.apps.name' | i18n }}</nz-form-label>
      <nz-form-control [nzSm]="18" [nzMd]="18" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid appName!">
        <nz-input-group nzSearch [nzAddOnAfter]="suffixStrategyButton">
          <input [(ngModel)]="form.model.appName" [ngModelOptions]="{ standalone: true }" nz-input name="appName"
            id="appName" />
        </nz-input-group>
        <ng-template #suffixStrategyButton>
          <button nz-button nzType="primary" nzSearch (click)="onSelectApp($event)">{{ 'mxk.text.select' | i18n
            }}</button>
        </ng-template>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="relatedUsername">{{ 'mxk.accounts.relatedUsername' | i18n
        }}</nz-form-label>
      <nz-form-control [nzSm]="18" [nzMd]="18" [nzXs]="36" [nzXl]="48"
        nzErrorTip="The input is not valid relatedUsername!">
        <nz-input-group nzSearch>
          <input [(ngModel)]="form.model.relatedUsername" [ngModelOptions]="{ standalone: true }" nz-input
            disabled="{{ isEdit }}" name="relatedUsername" id="relatedUsername" />
        </nz-input-group>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="relatedPassword">{{ 'mxk.accounts.relatedPassword' | i18n
        }}</nz-form-label>
      <nz-form-control [nzSm]="18" [nzMd]="18" [nzXs]="36" [nzXl]="48"
        nzErrorTip="The input is not valid relatedPassword!">
        <nz-input-group nzSearch [nzSuffix]="suffixTemplate" [nzAddOnAfter]="suffixPasswordButton">
          <input [(ngModel)]="form.model.relatedPassword" [ngModelOptions]="{ standalone: true }" nz-input
            [type]="passwordVisible ? 'text' : 'password'" name="relatedPassword" id="relatedPassword" />
        </nz-input-group>
        <ng-template #suffixTemplate>
          <i nz-icon [nzType]="passwordVisible ? 'eye-invisible' : 'eye'"
            (click)="passwordVisible = !passwordVisible"></i>
        </ng-template>
        <ng-template #suffixPasswordButton>
          <button nz-button nzType="primary" nzSearch (click)="onPassword($event)">{{ 'mxk.text.generate' | i18n
            }}</button>
        </ng-template>
      </nz-form-control>
    </nz-form-item>
  </form>
</div>

<div *nzModalFooter>
  <button nz-button nzType="default" (click)="onClose($event)">{{ 'mxk.text.close' | i18n }}</button>
  <button nz-button nzType="primary" (click)="onSubmit($event)">{{ 'mxk.text.submit' | i18n }}</button>
</div>